<template>
	<view class="container">
		<cu-custom :bgLiner="true">
			<block slot="content">录音列表</block>
		</cu-custom>
		<view class="card">
			<view class="item " v-for="(item,index) in list" @click="yulan(item,index)">
				<view class="flex justify-space-between align-center">
					<view class="flex-1 flex justify-start align-center">
						<view class="icon">
							<image style="width: 56rpx;height: 49rpx"
								src="/static/img/recording-file.png"></image>
						</view>
						<view class="con">
							<view class="name text-overflow-1">{{item.created_at}}</view>
						</view>
					</view>
					<view class="flex-none flex">
						<view class="black-9 flex-none">结果分析：</view>
						<view class="con relative width100">
							<view class="flex" v-if="item.analysis_result==null">待生成
							</view>
							<view v-else-if="item.analysis_result=='1'">生成中</view>
							<view class="flex" v-else>
								<view  @click.stop="resultShowChange(index,1)">已生成</view>
								<view @click.stop="resultShowChange(index,1)" class="_icon "
									><uni-icons :type="!item.resultShow ? 'down':'up'" color="#999"
										size="21"></uni-icons></view>
							</view>
						</view>
					</view>
				</view>
				<view class="item_remark" v-if="item.resultShow&&item.analysis_result">
					<zero-markdown-view :markdown="item.analysis_result"></zero-markdown-view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: 650,
				windowWidth: 375,
				list:[],
				id: 0,
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getList();
		},
		methods: {
			yulan(item, index) {
				let audio_json = JSON.parse(item.audio_json);
				let audio = audio_json.src;
				let duration = audio_json.duration;
				uni.navigateTo({
					url: '/pages/system/playback?audioSrc=' + audio+'&duration='+duration
				})
			},
			getList(){
				let data = {
					id:this.id
				}
				this.$http('/api/visitsAudioList', data, 'get').then(res => {
					if (res.code == 200) {
						this.list = res.data.items;
						this.list.forEach(item => {
							this.$set(item, 'resultShow', false);
						})
					}
				})
			},
			resultShowChange(index, num) { // 1 结果分析 2 打卡记录
				if (num === 1) {
					this.list[index].resultShow = !this.list[index].resultShow
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.container {
		padding-top: 30rpx;

		.upload {
			box-sizing: border-box;
			width: 150rpx;
			height: 150rpx;
			overflow: hidden;
			.add-s{
				width: 150rpx;
				height: 150rpx;
			}
			.li {
				width: 400rpx;
				height: 400rpx;
			}
		}

		.card {
			font-size: 28rpx;
			padding-left: 40rpx;
			padding-right: 20rpx;

			.item {
				padding: 20rpx 0;
				border-bottom: 1px solid #eee;
				.icon {
					margin-right: 30rpx;
				}

				.con {
					.name {
						font-size: 32rpx;
					}

					.size {
						color: #999;
					}
				}
				
				.yulan {
					min-width: 90rpx;
					// width: 80rpx;
					height: 49rpx;
					line-height: 45rpx;
					text-align: center;
					margin-right: 40rpx;
					color: #999;
					margin-left: 30rpx;
					border: 1px solid #DEDEDE;
					border-radius: 25rpx;
				}

				.colse_icon {
					min-width: 35rpx;
				}
			}
		}
	}
	.footer-wrap{
		width: 100%;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 10rpx 30rpx;
	}
	.footer_btn{
	  color: #ffffff;
	  background: #5cb9fb;
	  border-radius: 20rpx;  
	  height: 90rpx;
	  text-align: center;
	  line-height: 90rpx;
	  font-size: 34rpx;
	}
	.item_remark {
		font-size: 26rpx;
		color: #999;
		border-radius: 20rpx;
		// padding: 10rpx 20rpx;
		background: #F7F7F7;
	}
</style>